require('./Panel.styl');
import { Control } from 'react-keeper'
const { Boxs, Icon, Tab } = SaltUI;
const { HBox, Box } = Boxs;
var active = 0;
const ui = require('clientConfig/util/jsapi/ui');
class Panel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            active: props.activenum?props.activenum:active,
        };
        this.handleExchange = this.handleExchange.bind(this);
    }
    handleClick(ID,title) {
        this.props.cb(ID);
        ui.setTitle({ title });
    }
    handleExchange(obj) {
        this.setState({ active: obj.active });
    }
    clickPlus(){
        this.props.cbPlus();
    }
    render() {
        let t = this;
        var num = null;
        return (
            <div className="panel">
                {React.Children.map(t.props.children, (child) => {
                    if (t.props.children instanceof Array) {
                        if(child !== null){
                            if (num == null)
                                num = t.props.children.length - this.props.tabTitles.split(" ").length;
                            num--;
                        }else{

                        }
                    }
                    if (num >= 0) {
                        return (
                            <div onClick={() => { if (this.props.cb) this.handleClick(this.props.Key,this.props.title) }}>
                                {child}
                                <div className="panel-btn">
                                    <HBox vAlign="center">
                                        <Box flex={1} className="t-FAL t-SML16 ft17">{this.props.title}</Box>
                                        {this.props.active && <Box flex={1} className="t-FAR t-SMR8 btn-icon"><Icon onClick={()=>{this.clickPlus()}} name="plus"  fill="#fff" /></Box>}
                                    </HBox>
                                    {this.props.tabTitles && <div className="mytab">
                                        <Tab active={this.state.active}  onChange={this.handleExchange}>
                                            {this.props.tabTitles.split(" ").map((item,index) => {
                                                return (<Tab.Item title={item}>
                                                    {t.props.children[index+1]}
                                                </Tab.Item>)
                                            })}
                                        </Tab>
                                    </div>}
                                </div>
                            </div>);
                    }
                })}
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        active = this.state.active;
    }
}

module.exports = Panel;
